<!-- src/components/Calendar/DatePicker.vue -->
<template>
  <div class="date-picker" v-if="visible">
    <!-- 顶部月份导航 -->
    <div class="date-picker-header">
      <button class="nav-button" @click="previousMonth">‹</button>
      <div class="current-month">{{ displayYear }}年{{ displayMonth + 1 }}月</div>
      <button class="nav-button" @click="nextMonth">›</button>
    </div>

    <!-- 星期标题 -->
    <div class="week-days">
      <div class="week-day" v-for="day in weekDays" :key="day">{{ day }}</div>
    </div>

    <!-- 日期网格 -->
    <div class="date-grid">
      <div
        class="date-cell"
        v-for="date in calendarDays"
        :key="date.key"
        :class="{
          'other-month': !date.isCurrentMonth,
          'today': date.isToday,
          'selected': date.isSelected
        }"
        @click="selectDate(date)"
      >
        <div class="date-number">{{ date.date }}</div>
        <div v-if="date.isToday" class="today-indicator"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

interface Props {
  visible: boolean
  initialDate?: Date
}

interface Emits {
  (e: 'select', date: Date): void
  (e: 'close'): void
}

interface CalendarDate {
  date: number
  isCurrentMonth: boolean
  isToday: boolean
  isSelected: boolean
  fullDate: Date
  key: string
}

const props = withDefaults(defineProps<Props>(), {
  initialDate: () => new Date()
})

const emit = defineEmits<Emits>()

const weekDays = ['日', '一', '二', '三', '四', '五', '六']

// 当前显示的月份和年份
const displayMonth = ref(props.initialDate.getMonth())
const displayYear = ref(props.initialDate.getFullYear())
const selectedDate = ref<Date>(new Date(props.initialDate))

// 生成日历日期数据
const calendarDays = computed(() => {
  const days: CalendarDate[] = []
  const firstDayOfMonth = new Date(displayYear.value, displayMonth.value, 1)
  const lastDayOfMonth = new Date(displayYear.value, displayMonth.value + 1, 0)
  const firstDayWeek = firstDayOfMonth.getDay() // 0 = 周日
  
  const today = new Date()
  
  // 添加上个月的日期
  const prevMonthLastDay = new Date(displayYear.value, displayMonth.value, 0).getDate()
  for (let i = firstDayWeek - 1; i >= 0; i--) {
    const date = prevMonthLastDay - i
    const fullDate = new Date(displayYear.value, displayMonth.value - 1, date)
    
    days.push({
      date,
      isCurrentMonth: false,
      isToday: isSameDay(fullDate, today),
      isSelected: isSameDay(fullDate, selectedDate.value),
      fullDate,
      key: `prev-${date}`
    })
  }
  
  // 添加当前月的日期
  for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {
    const fullDate = new Date(displayYear.value, displayMonth.value, i)
    
    days.push({
      date: i,
      isCurrentMonth: true,
      isToday: isSameDay(fullDate, today),
      isSelected: isSameDay(fullDate, selectedDate.value),
      fullDate,
      key: `current-${i}`
    })
  }
  
  // 添加下个月的日期
  const totalCells = 42 // 6行7列
  const nextMonthDays = totalCells - days.length
  for (let i = 1; i <= nextMonthDays; i++) {
    const fullDate = new Date(displayYear.value, displayMonth.value + 1, i)
    
    days.push({
      date: i,
      isCurrentMonth: false,
      isToday: isSameDay(fullDate, today),
      isSelected: isSameDay(fullDate, selectedDate.value),
      fullDate,
      key: `next-${i}`
    })
  }
  
  return days
})

// 检查两个日期是否是同一天
const isSameDay = (date1: Date, date2: Date): boolean => {
  return date1.getFullYear() === date2.getFullYear() &&
         date1.getMonth() === date2.getMonth() &&
         date1.getDate() === date2.getDate()
}

// 上个月
const previousMonth = () => {
  if (displayMonth.value === 0) {
    displayMonth.value = 11
    displayYear.value--
  } else {
    displayMonth.value--
  }
}

// 下个月
const nextMonth = () => {
  if (displayMonth.value === 11) {
    displayMonth.value = 0
    displayYear.value++
  } else {
    displayMonth.value++
  }
}

// 选择日期
const selectDate = (date: CalendarDate) => {
  selectedDate.value = new Date(date.fullDate)
  emit('select', selectedDate.value)
  emit('close')
}

// 监听初始日期变化
watch(() => props.initialDate, (newDate) => {
  if (newDate) {
    selectedDate.value = new Date(newDate)
    displayMonth.value = newDate.getMonth()
    displayYear.value = newDate.getFullYear()
  }
}, { immediate: true })
</script>

<style scoped>
.date-picker {
  position: absolute;
  top: 100%;
  left: 0;
  width: 210px; 
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px; 
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  z-index: 1002;
  padding: 9px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.date-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
}

.current-month {
  font-weight: 600;
  color: #333;
  font-size: 13px;
}

.nav-button {
  background: none;
  border: none;
  font-size: 14px; 
  cursor: pointer;
  color: #666;
  width: 24px; 
  height: 24px; 
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.nav-button:hover {
  background: #f5f5f5;
}

.week-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px; 
}

.week-day {
  text-align: center;
  font-size: 10px; 
  color: #666;
  padding: 3px; 
  font-weight: 500;
}

.date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px; 
}

.date-cell {
  position: relative;
  height: 27px; 
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 11px; 
  font-weight: 500;
}

.date-cell:hover {
  background: #f8f9fa; /* 更浅的悬停背景 */
}

.date-cell.other-month {
  color: #ccc;
}

.date-cell.today .date-number {
  color: #1976d2;
  font-weight: 600;
}

.date-cell.today .today-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px; 
  height: 24px; 
  border: 1.5px solid #1976d2;
  border-radius: 50%;
  z-index: -1;
}

.date-cell.selected .date-number {
  background: #1976d2;
  color: white;
  border-radius: 50%;
  width: 24px; 
  height: 24px; 
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.date-number {
  width: 24px; 
  height: 24px; 
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}
</style>